import React from 'react';

import './device.css';
import Lng from '../common/lng';
import Service from "./Service";
import BaseModule from "../common/BaseModule";
import AddDeviceForm from "./AddDeviceForm";
import {Popconfirm} from "antd";


class Device extends BaseModule {

    constructor(props) {
        super(props);

        this._page.unionType = {
            name: "OR"
        }
    }

    loadData() {
        this._page.items = [];
        this._page.items.push({
            queryKey: "code",
            queryValue: this.refs.input.input.value,
            conditionType: "LIKE"
        }, {
            queryKey: "name",
            queryValue: this.refs.input.input.value,
            conditionType: "LIKE"
        });

        super.superLoadData(Service.listDevice);
    }

    edit() {

    }

    remove(record) {
        const self = this;
        Service.remove(record.id, () => {
            self.loadData();
        })
    }

    addClick() {
        this.refs["addModal"].showModal();
    }

    render() {
        const columns = [{
            title: Lng.get("device.code"),
            dataIndex: 'code',
            key: 'code',
        }, {
            title: Lng.get("device.name"),
            dataIndex: 'name',
            key: 'name',
        }, {
            title: Lng.get("device.type"),
            dataIndex: 'deviceTypeName',
            key: 'deviceTypeCode',
        }, {
            title: Lng.get("device.store"),
            dataIndex: 'storeName',
            key: 'storeCode',
        }, {
            title: Lng.get("device.enableStartTime"),
            dataIndex: 'enableStartTime',
            key: 'enableStartTime',
        }, {
            title: Lng.get("device.enableEndTime"),
            dataIndex: 'enableEndTime',
            key: 'enableEndTime',
        }, {
            title: Lng.get("common.operation"),
            dataIndex: 'operation',
            key: 'operation',
            render: (text, record, index) => {
                return <div className={"operation"}>
                    <Popconfirm title={Lng.get("common.confirm")} onConfirm={this.remove.bind(this, record)}
                                okText={Lng.get("common.ok")}
                                cancelText={Lng.get("common.cancel")}>
                        <a href={"#"}>{Lng.get("common.remove")}</a>
                    </Popconfirm>
                    <a onClick={this.edit.bind(this, record)}>{Lng.get("common.edit", {name: ""})}</a>
                    <a>{Lng.get("device.module")}</a>
                </div>
            }
        }];

        return (
            <div id={"device-content"}>
                {this.renderSearchBar(Lng.get("device.placeholder"))}
                {this.renderTable(columns)}
                {this.renderModal("addModal", AddDeviceForm, Lng.get("device.main"), Service.saveDevice)}
            </div>
        );
    }
}

export default Device;